import ProForm, {
  ModalForm,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-form';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, message, Popconfirm } from 'antd';
import { PlusOutlined, EllipsisOutlined } from '@ant-design/icons';
import React, { useRef, useState } from 'react';
import { formatTime } from '@/common/publicFun';
import {
  createNewAccount,
  froozen,
  getAllAccount,
  whiteList,
} from '@/service/account';
import { changeStatus, getAllArticles } from '@/service/article';
import { ITab } from '@/interface/tab';

export default function ArticleContent() {
  const actionRef = useRef<ActionType>();
  const restFormRef = useRef<ProFormInstance>();

  const columns: ProColumns[] = [
    {
      title: '标题',
      dataIndex: 'title',
      // hideInSearch: true,
      ellipsis: true,
      align: 'left',
      fixed: 'left',
    },
    {
      title: '作者',
      dataIndex: 'author',
      width: 100,
      ellipsis: true,
      // hideInSearch: true,
      align: 'left',
    },
    {
      title: 'id',
      dataIndex: 'id',
      width: 100,
      align: 'center',
      ellipsis: true,
      copyable: true,
    },
    {
      title: '发布时间',
      align: 'center',
      dataIndex: 'create_Ts',
      width: 150,
      hideInSearch: true,
      sorter: (a, b) => {
        return Number(a.create_Ts) - Number(b.create_Ts);
      },
      render: (_, _record) => (
        <span>{formatTime(_record.create_Ts, 'FULL_TIME')}</span>
      ),
    },
    {
      title: '标签',
      dataIndex: 'tabs',
      // width: 60,
      align: 'center',
      render: (_, _record) =>
        _record.tabs.map((tab: ITab) => (
          <span key={'tab' + tab.value}>{tab.lable}</span>
        )),
    },
    {
      title: '点赞量',
      width: 80,
      align: 'center',
      hideInSearch: true,
      dataIndex: 'like',
      sorter: (a, b) => {
        return a.like.length - b.like.length;
      },
      render: (_, _record) => <div>{_record.like.length}</div>,
    },
    {
      title: '收藏量',
      dataIndex: 'save',
      width: 80,
      align: 'center',
      hideInSearch: true,
      sorter: (a, b) => {
        return a.save.length - b.save.length;
      },
      render: (_, _record) => <div>{_record.save.length}</div>,
    },
    {
      title: '评论数',
      dataIndex: 'comments',
      hideInSearch: true,
      width: 80,
      align: 'center',
      sorter: (a, b) => {
        return a.comments.length - b.comments.length;
      },
      render: (_, _record) => <div>{_record.comments.length}</div>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 80,
      align: 'center',
      editable: false,
      valueEnum: {
        1: { text: '已上线', color: 'green' },
        0: { text: '已下线', color: 'red' },
      },
    },
    {
      title: '操作',
      align: 'center',
      // width: 300,
      key: 'option',
      fixed: 'right',
      valueType: 'option',
      render: (_, _record, index, action) => [
        <a
          style={{ borderStyle: 'none', color: '#1890ff' }}
          key={'putWhiteList' + _record.id}
          onClick={() => changeArticleStatus({ id: _record.id })}
        >
          {_record.status ? '下线' : '上线'}
        </a>,
      ],
    },
  ];

  async function changeArticleStatus(params: { id: string }) {
    const data = await changeStatus(params);
    if (data.stat === 'ok') {
      message.success('操作成功');
      actionRef.current?.reload();
      return true;
    } else {
      message.error('操作失败，' + data.msg);
    }
  }

  return (
    <React.Fragment>
      <ProTable
        actionRef={actionRef}
        pagination={{ pageSize: 7, current: 1, showSizeChanger: true }}
        columns={columns}
        rowKey={'id'}
        search={{ defaultCollapsed: false }}
        request={async (params, sorter, filter) => {
          // 表单搜索项会从 params 传入，传递给后端接口。
          const data = await getAllArticles({
            ...params,
            offset: (params.pageSize || 7) * ((params.current || 1) - 1),
            limit: params.pageSize || 7,
            status:
              params.status === '0' ? 0 : params.status === '1' ? 1 : undefined,
            ...sorter,
          });
          return data.data;
        }}
      />
    </React.Fragment>
  );
}
